Angular Material এর Virtual Scrolling কম্পোনেন্ট, যা MatVirtualScrollViewport নামে পরিচিত, বড় ডেটা সেটগুলিকে স্ক্রল করার সময় পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়। ভার্চুয়াল স্ক্রলিং আপনাকে শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো লোড করতে এবং বাকি আইটেমগুলোকে Lazy Load করতে সহায়তা করে। এতে পেজ লোডের সময় এবং মেমরি ব্যবহারে সাশ্রয় হয়, বিশেষ করে যখন আপনি বড় ডেটা সেট বা তালিকা প্রদর্শন করতে চান।

ভার্চুয়াল স্ক্রলিং ব্যবহার করার মাধ্যমে, আপনি হাজার হাজার আইটেমের মধ্যে দ্রুত স্ক্রল করতে পারবেন, কারণ Angular শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো ম্যানেজ করে এবং বাকি আইটেমগুলো লোড করা হয় যখন ব্যবহারকারী স্ক্রল করে।

ভার্চুয়াল স্ক্রলিং ব্যবহার করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

ভার্চুয়াল স্ক্রলিং ব্যবহারের জন্য ScrollingModule ইমপোর্ট করতে হবে।

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ScrollingModule]
})
export class AppModule {}

২. HTML টেমপ্লেটে ভার্চুয়াল স্ক্রলিং ব্যবহার করা

Angular Material এর MatVirtualScrollViewport ব্যবহার করে ভার্চুয়াল স্ক্রলিং যুক্ত করা যেতে পারে। নিচে একটি উদাহরণ দেয়া হলো:

<mat-virtual-scroll-viewport itemSize="50" [minBufferPx]="200" [maxBufferPx]="400">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</mat-virtual-scroll-viewport>

এখানে:

• mat-virtual-scroll-viewport: ভার্চুয়াল স্ক্রলিং কন্টেইনার, যেখানে সমস্ত আইটেম স্ক্রল হয়।
• itemSize: প্রতিটি আইটেমের উচ্চতা বা প্রস্থ (পিক্সেলে)।
• cdkVirtualFor: এটি *ngFor এর মতো কাজ করে, কিন্তু শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো রেন্ডার করে।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা প্রস্তুত করা

এখন টাইপস্ক্রিপ্ট ফাইলে একটি ডেটা অ্যারে তৈরি করতে হবে যা ভার্চুয়াল স্ক্রলিংয়ের জন্য ব্যবহার হবে। এখানে একটি উদাহরণ দেয়া হলো:

import { Component } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  // উদাহরণস্বরূপ ১০০০ আইটেমের একটি তালিকা
  items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}

এখানে, আমরা একটি 1000 আইটেমের তালিকা তৈরি করেছি যা ভার্চুয়াল স্ক্রলিং দ্বারা প্রদর্শিত হবে।

৪. স্টাইলিং

MatVirtualScrollViewport এর ভিতরে থাকা আইটেমগুলোর সাইজ এবং মাপ কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করা যেতে পারে।

.item {
  height: 50px;   /* আইটেমের উচ্চতা */
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

এখানে, .item ক্লাসটি প্রতিটি আইটেমের স্টাইলিং নির্ধারণ করে।

ভার্চুয়াল স্ক্রলিং এর সুবিধা

• পারফরম্যান্স বৃদ্ধি: ভার্চুয়াল স্ক্রলিং ব্যবহারের মাধ্যমে শুধুমাত্র দৃশ্যমান আইটেম লোড হয়, যার ফলে স্ক্রলিংয়ের সময় পারফরম্যান্স অনেক উন্নত হয়।
• মেমরি সাশ্রয়: লোড করা আইটেমের সংখ্যা সীমিত থাকে, যার ফলে ব্রাউজারের মেমরি ব্যবহারে সাশ্রয় হয়।
• ডেটা লোডের দ্রুত গতি: ব্যবহারকারীরা দ্রুত স্ক্রল করতে পারবে, কারণ ভার্চুয়াল স্ক্রলিং শুধুমাত্র দেখানো আইটেমগুলোকে লোড করে এবং বাকি আইটেমগুলোতে স্ক্রল করার সময় লোড হয়।

Angular Material Virtual Scrolling ডেভেলপারদের জন্য একটি শক্তিশালী টুল যা বড় ডেটাসেট বা লম্বা তালিকা প্রদর্শনের সময় পারফরম্যান্সকে অনেক উন্নত করে। এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে এবং ব্রাউজারকে অতিরিক্ত মেমরি এবং প্রসেসিংয়ের চাপ থেকে মুক্ত রাখে। আপনি MatVirtualScrollViewport এবং cdkVirtualFor ডিরেকটিভ ব্যবহার করে সহজেই ভার্চুয়াল স্ক্রলিং সক্ষম করতে পারেন এবং বড় ডেটা সেটের সাথে কাজ করা অনেক দ্রুত এবং কার্যকরী হবে।

Angular Material এর MatList কম্পোনেন্ট সাধারণত একটি স্টাইলিশ এবং কাস্টমাইজযোগ্য লিস্ট তৈরি করতে ব্যবহৃত হয়। কিন্তু যখন লিস্টে অনেক ডেটা থাকে, তখন পুরো লিস্টটি লোড করা এবং ডিসপ্লে করা পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, বিশেষত মোবাইল ডিভাইসে। এর সমাধান হিসেবে, Virtual Scrolling বা ভার্চুয়াল স্ক্রল ব্যবহার করা হয়, যা শুধুমাত্র দৃশ্যমান এলিমেন্টগুলো লোড করে, এর ফলে পারফরম্যান্স উন্নত হয়।

Angular Material এর MatList এর সাথে ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য CdkVirtualScrollViewport এবং CdkScrollingModule ব্যবহার করা হয়।

ভার্চুয়াল স্ক্রল (Virtual Scrolling) প্রয়োগ করা

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য প্রথমে CdkScrollingModule এবং MatListModule ইমপোর্ট করতে হবে।

import { CdkScrollingModule } from '@angular/cdk/scrolling';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    CdkScrollingModule,
    MatListModule
  ]
})
export class AppModule { }

২. HTML টেমপ্লেটে ভার্চুয়াল স্ক্রল প্রয়োগ করা

এখন, CdkVirtualScrollViewport ব্যবহার করে ভার্চুয়াল স্ক্রল যোগ করা যাবে। এটি ব্যবহারকারী স্ক্রলিং করলে শুধুমাত্র দৃশ্যমান আইটেমগুলোই লোড করবে এবং অন্যান্য আইটেমগুলো লোড হবে না যতক্ষণ না সেগুলো দৃশ্যমান হয়।

<cdk-virtual-scroll-viewport itemSize="50" class="list-container">
  <mat-list>
    <mat-list-item *cdkVirtualFor="let item of items">
      {{item}}
    </mat-list-item>
  </mat-list>
</cdk-virtual-scroll-viewport>

এখানে:

• cdk-virtual-scroll-viewport: এটি ভার্চুয়াল স্ক্রল কন্টেইনার, যা শুধুমাত্র দৃশ্যমান এলিমেন্টগুলো প্রদর্শন করে।
• itemSize: এটি প্রতিটি আইটেমের উচ্চতা নির্ধারণ করে।
• cdkVirtualFor: এটি ngFor এর মত কাজ করে, তবে এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে, বাকি আইটেমগুলো লোড হয় না যতক্ষণ না এগুলো স্ক্রলে দেখা যায়।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা প্রদান

import { Component } from '@angular/core';

@Component({
  selector: 'app-virtual-list',
  templateUrl: './virtual-list.component.html',
  styleUrls: ['./virtual-list.component.css']
})
export class VirtualListComponent {
  items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}

এখানে, items একটি ১০০০ আইটেমের লিস্ট তৈরি করছে, যা ভার্চুয়াল স্ক্রলিংয়ের মাধ্যমে লোড হবে।

ভার্চুয়াল স্ক্রলিংয়ের সুবিধা

1. পারফরম্যান্স উন্নতি: ভার্চুয়াল স্ক্রলিং শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে, যার ফলে কম মেমরি ব্যবহৃত হয় এবং অ্যাপ্লিকেশন আরও দ্রুত কাজ করে।
2. লম্বা লিস্টের জন্য উপযুক্ত: অনেক ডেটা থাকলে, যেমন ১০০০ বা তার বেশি আইটেম, ভার্চুয়াল স্ক্রল ব্যবহার করলে অ্যাপ্লিকেশন অনেক দ্রুত লোড হয়।
3. মোবাইল ফ্রেন্ডলি: ভার্চুয়াল স্ক্রল মোবাইল ডিভাইসেও পারফরম্যান্স উন্নত করতে সাহায্য করে, যেখানে কম রিসোর্স ব্যবহৃত হয়।

স্টাইলিং এবং কাস্টমাইজেশন

লিস্টের স্টাইলিং করতে CSS ব্যবহার করতে পারেন। যেমন, ভার্চুয়াল স্ক্রল কন্টেইনারের আউটপুটের মধ্যে প্যাডিং এবং স্ক্রলবার ইত্যাদি কাস্টমাইজ করা যায়।

.list-container {
  height: 400px;
  width: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

এখানে, height এবং width দিয়ে ভার্চুয়াল স্ক্রল কন্টেইনারের আকার নির্ধারণ করা হয়েছে, এবং overflow এর মাধ্যমে স্ক্রলিং সক্ষম করা হয়েছে।

Virtual Scrolling বা ভার্চুয়াল স্ক্রল Angular Material এর MatList কম্পোনেন্টে খুবই কার্যকরী, বিশেষত যখন অনেক আইটেম নিয়ে কাজ করা হয়। এটি পারফরম্যান্স অপটিমাইজেশন করতে সাহায্য করে, কারণ এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে। CdkVirtualScrollViewport এবং CdkScrollingModule এর মাধ্যমে সহজেই ভার্চুয়াল স্ক্রল প্রয়োগ করা যায়, যা বড় বড় ডেটা সেটের সাথে কাজ করার জন্য উপযুক্ত।